<template>
    <div id="content">
        <section class="section1">
            <div class="section1-content">
                <div class="search">
                    <span class="title">精确查找</span>
                    <div>
                        <el-select v-model="select" slot="prepend" placeholder="请选择">
                          <el-option :label="item" :value="item" v-for="(item,index) in searchList" :key='index'></el-option>
                          <!-- <el-option label="订单号" value="2"></el-option>
                          <el-option label="用户电话" value="3"></el-option> -->
                        </el-select>
                        <el-input
                          placeholder="请输入内容"
                          v-model="searchInput"
                          class="input-with-select"
                        >
                        </el-input>
                        <span class="iconfont icon-sousuo icon-search"></span>
                    </div>
                </div>
                <div class="fileType">
                    <span class="title">用户类型</span>
                    <el-tabs type="border-card" @tab-click="handleClick" v-model="activeName">
                        <el-tab-pane name="全部" label="全部">全部</el-tab-pane>
                        <el-tab-pane name="普通用户" label="普通用户">普通用户</el-tab-pane>
                        <el-tab-pane name="负责人" label="负责人">负责人</el-tab-pane>
                        <el-tab-pane name="内部成员" label="内部成员">内部成员</el-tab-pane>
                    </el-tabs>
                </div>
                <div class="button">
                    <el-button type="primary" @click="queryUserList">查询</el-button>
                    <el-button type="info" @click="initUserList">重置</el-button>
                </div>
            </div>
        </section>
        <section class="section2">
            <div class="section2-add">
                <AddUser class="AddRepository" :headUrl='headUrl'/>
            </div>
            <div class="user-table">
                <el-table :data="tableData.dataList" style="width: 100%">
                    <el-table-column prop="headUrl" label="头像" width="100">
                        <template slot-scope="scope" >
                            <img :src="scope.row.headUrl" alt="" :style="{width:'50px',height:'50px'}">
                        </template>
                    </el-table-column>
                    <el-table-column
                          :prop="item.prop"
                          :label="item.label"
                          :sortable="item.sortable"
                          :width="item.width"
                          v-for='(item,index) in tableData.titleList' :key="index"
                    >
                    </el-table-column>
                    <el-table-column prop="isInnerMember" label="用户类型" width="120">
                        <template slot-scope="scope" >
                            <template v-if="scope.row.isInnerMember == 1">
                                  普通用户
                            </template>
                            <template v-if="scope.row.isInnerMember == 2">
                                  内部成员
                            </template>
                            <template v-if="scope.row.isInnerMember == 3">
                                  负责人
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="userStatus" label="账号状态" width="120">
                        <template slot-scope="scope" >
                            <template v-if="scope.row.userStatus == 1">
                                  禁用
                            </template>
                            <template v-if="scope.row.userStatus == 2">
                                  正常
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="150">
                        <template slot-scope="scope" >
                            <span class="font-color" >详情</span>
                            <span class="font-color" @click="showConfirm(scope.row.userId)" v-show="scope.row.userStatus==2">禁用</span>
                            <span class="font-color" @click="showEnable(scope.row.userId)" v-show="scope.row.userStatus==1">启用</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <a-pagination
                  show-quick-jumper
                  :default-current="1"
                  :total="total"
                  @change="onChange"
                />
            </div>
        </section>
    </div>
</template>

<script>
import "@/assets/css/userManage/font_8kqdhl47x5t/iconfont.css";
import AddUser from "./components/AddUser";
// import EditRepository from "./EditRepository";
// import Check from "./Check";
import tableData from './utils/tableData'
import searchList from './utils/searchList'
export default {
    components: {
        AddUser,
    },
    data() {
        return {
            deleteModalText: "确认删除这条资源记录吗",
            ModalText: "确认将该资源下架吗",
            visible: false,
            confirmLoading: false,
            //选中类型
            activeName: '全部',
            //用户类型
            isInnerMember : '',
            //用户头像
            headUrl:'',
            //选中类型映射表
            selectMap: {
                "全部": '',
                "普通用户": 1,
                "内部成员": 2,
                "负责人": 3
            },

            input1: "",
            input2: "",
            searchInput: "",
            select: "",
            // activeName: "first",
            //搜索下拉选项
            searchList,
            //用户列表
            tableData,
            //分页号
            pageNumber: 1,
            //用户总个数
            total:0,
            //用户列表查询条件
            //输入对应的查询字段
            maplist: {
                "用户ID": 'userId',
                "名称": 'nickname',
                "年级": 'grade',
                "联系方式": 'phone',
                "内部成员": 'isInnerMember',
                "目标方向": 'goal',
                "账号状态": 'userStatus',
            }
        };
    },
    methods: {
        //用户类型查询
        handleClick(tab, event) {
            // console.log('select',this.activeName);
            // let selectType = event.target.innerHTML
            this.isInnerMember = this.selectMap[this.activeName]
            // this.queryUserList(isInnerMember)
        },
        //查询用户列表
        async queryUserList (isInnerMember) {
            let searchOption = {
                pageNum: this.pageNumber,
                pageSize: 4,  
            }
            if(this.isInnerMember) {
              searchOption['isInnerMember'] = this.isInnerMember
            }
            if(this.searchInput) {
                let option = this.maplist[this.select]
                console.log('option',option);
                searchOption[option] = this.searchInput
                searchOption.pageNum = this.pageNumber
                // console.log('searchOption');
            }
            console.log('this.searchOption',searchOption);
            let res = await this.$api.getUsersList(searchOption)
            console.log('res',res);
            this.tableData.dataList = res.data.list
            this.total = Math.ceil(res.data.page.total/4)*10
            // console.log('total',this.total);
            //将分页数置为第一页
            this.pageNumber = 1
        },
        //重置用户列表
        initUserList () {
            this.tableData.dataList = ''
            this.searchInput = ''
            this.select = '请选择'
            this.activeName = '全部'
            this.isInnerMember = this.selectMap[this.activeName]
            // this.queryUserList()
        },
        //分页
        onChange(pageNumber) {
            this.pageNumber = pageNumber
            this.queryUserList(this.selectMap[this.activeName])
        },
        //点击禁用按钮
        showConfirm(userId) {
            let vc = this
            this.$confirm({
                title: "确认禁用当前用户吗",
                content: (h) => <div style="color:red;"></div>,
                onOk() {
                    console.log('ok');
                    vc.$api.editUsersMessage({
                        userId,
                        userStatus: 1
                    })
                    vc.queryUserList()
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "test",
            });
        },
        //点击启用
        showEnable(userId) {
            let vc = this
            this.$confirm({
                title: "确认启用当前用户吗",
                content: (h) => <div style="color:red;"></div>,
                onOk() {
                    console.log('ok');
                    vc.$api.editUsersMessage({
                        userId,
                        userStatus: 2
                    })
                    vc.queryUserList()
                },
                onCancel() {
                    console.log("Cancel");
                },
                class: "test",
            });
        },
        //删除提示
        handledDeleteClick() {
            this.visible = true;
        },
        //下架提示
        showModal() {
            this.visible = true;
        },
        handleOk(e) {
            this.ModalText = "The modal will be closed after two seconds";
            this.confirmLoading = true;
            setTimeout(() => {
                this.visible = false;
                this.confirmLoading = false;
            }, 2000);
        },
        handleCancel(e) {
            console.log("Clicked cancel button");
            this.visible = false;
        },
    },
};
</script>

<style lang='scss' scoped>
$color: #ffffff;
$border-radius: 15px;
#content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .section1 {
    width: 95%;
    height: 200px;
    margin-top: 20px;
    .crumbs {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 30px;
      .iocn-size {
        margin-right: 10px;
        color: #3c99fe;
        font-size: 25px;
      }
    }
    .section1-content {
      width: 100%;
      height: 200px;
      background-color: $color;
      border-radius: $border-radius;
      overflow: hidden;
      .search {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        /deep/ .input-with-select .el-input__inner {
          border-radius: 0px 30px 30px 0px;
        }
        /deep/ .el-input--suffix .el-input__inner {
          border-radius: 30px 0px 0px 30px;
        }
        .title {
          margin-right: 20px;
        }
        .el-select {
          width: 100px;
        }
        .input-with-select {
          position: relative;
          left: -5px;
          width: 300px;
        }
        .icon-search {
          position: relative;
          left: -50px;
          border-radius: 50%;
          padding: 5px;
          background-color: #dde6fc;
        }
      }
      .fileType {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        .title {
          margin-right: 20px;
        }
        .el-tabs {
          width: 400px;
          border-radius: 10px !important;
          .el-tabs--border-card {
            border: 0px solid transparent;
          }
          /deep/.el-tabs--border-card > .el-tabs__header {
            background-color: #f0f2f7;
            border-bottom: 0px;
          }
          /deep/ .el-tabs__content {
            display: none;
          }
        }
      }
      .special {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 10px;
        margin-left: 20px;
        .title {
          margin-right: 20px;
        }
        .el-tabs {
          width: 400px;
          /deep/ .el-tabs__content {
            display: none;
          }
        }
      }
      .button {
        margin-top: 30px;
        margin-left: 20px;
        .el-button {
          width: 100px;
          border-radius: 10px;
        }
        .el-button--info {
          background-color: #f0f2f7;
          border-color: #f0f2f7;
          color: blue;
        }
        .el-button--info:hover {
          background-color: #ebecec;
          border-color: #ebecec;
        }
      }
    }
  }
  .section2 {
    position: relative;
    width: 95%;
    height: 420px;
    margin-top: 20px;
    background-color: $color;
    border-radius: $border-radius;
    overflow: hidden;
    .user-table {
      height: 350px;
      overflow: auto;
    }
    .pagination {
      margin-left: 50%;
      margin-top: 15px;
      transform: translate(-50%);
    }
    /deep/ .cell {
      display: flex;
      justify-content: space-evenly;
    }
    .AddRepository {
      position: absolute;
      top: 5px;
      right: 20px;
      //   color: blue;
      z-index: 999;
    }
    /deep/ .el-tabs__content {
      height: 300px;
    }
    .poster {
      width: 100px;
      height: 50px;
    }
    .font-color {
      color: #3952fd;
      cursor: default;
    }
  }
}
</style>